3.10. Анимации и трансформации

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Анимации и трансформации

Эти свойства позволяют делать веб-страницу динамичной — добавлять движение, плавные переходы и визуальные эффекты.

animation – создаёт сложные анимации с ключевыми кадрами (@keyframes)/ Позволяет создавать многокадровые анимации, задавая ключевые точки («кадры») во времени.:

  @keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
  }
  .box {
    animation: slide 2s infinite;
  }

Сначала определяется анимация с помощью @keyframes, это означает: «анимация slide начинается с позиции 0 и заканчивается на 100px вправо». Затем она присваивается элементу.

slide — имя анимации.
2s — длительность одного цикла.
infinite — повторять бесконечно.

Другие значения:

alternate — менять направление после каждого цикла.
paused / running — управлять воспроизведением.
ease-in, linear — функция сглаживания.

Можно использовать проценты вместо from/to:

@keyframes pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}

transform – изменяет форму/положение элемента. Позволяет масштабировать, поворачивать, перемещать или наклонять элемент без изменения потока документа (остальные элементы ведут себя так, будто он на месте):

  .element {
    transform: rotate(45deg) scale(1.2) translate(10px, 20px);
  }

— элемент повернётся на 45°, увеличится в 1.2 раза и сместится на 10px вправо и 20px вниз. Основные функции:

translate(x, y) — сдвигает элемент по осям X и Y.
rotate(angle) — поворачивает (в градусах: 45deg, -90deg).
scale(factor) — увеличивает/уменьшает (scale(1.5) — в 1.5 раза больше).
skew(ax, ay) — наклоняет по осям.

transition – плавное изменение свойств. Делает изменение CSS-свойств плавным при смене состояния (например, при наведении курсора):

  .button {
    transition: background 0.3s ease;
  }
  .button:hover {
    background: red;
  }

— при наведении фон изменится от синего к красному за 0.3 секунды с плавным ускорением/замедлением.

Синтаксис:

transition: <свойство> <длительность> <функция сглаживания>;

<свойство> — какое свойство анимировать (background, color, opacity, transform и др.).
<длительность> — сколько длится переход (0.3s, 2s).
<функция сглаживания> — как проходит анимация (ease, linear, ease-in-out).

animation мощнее transition: позволяет описывать много шагов, повторы, задержки (animation-delay), состояние паузы.

Анимации и трансформации​

Анимации и трансформации